<template>
	<view>
		<view class="u-skeleton">
			<view class="header">
				<view class="title u-skeleton-fillet">专家律师</view>
				<view class="subtitle u-skeleton-fillet">在线解决法律问题</view>
				<view class="btn-con">
					<button :class="['btn', 'u-skeleton-fillet', {current: current === btn.id}]" type="default" v-for="(btn, index) in btns" :key="btn.id" @click="handleBtnClick(btn.id)">{{ btn.name }}</button>
				</view>
			</view>
			<view style="padding-top: 386rpx;">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<view class="lawyer-con">
						<view class="lawyer-item" v-for="(item, index) in teamList" :key="index" @click="navTo(item)">
							<view class="avatar">
								<image class="img u-skeleton-circle" :style="{opacity: item.isonline === 1 ? 1 : 0.5}" :src="item.avatar || '../../static/images/avatar.png'" mode=""></image>
								<!-- <view class="cate u-skeleton-circle" :style="{opacity: item.isonline === 1 ? 1 : 0.5}">
									<view class="item">
										<text>婚姻</text>
										<text>家事</text>
									</view>
								</view> -->
								<view class="online u-skeleton-fillet" v-if="item.isonline === 1">
									<view class="iconfont iconduihao"></view>
									<view class="text">在线</view>
								</view>
								<view class="offline u-skeleton-fillet" v-else>
									<view class="circel"></view>
									<view class="text">离线</view>
								</view>
							</view>
							<view class="lawyer-info">
								<view class="name u-skeleton-fillet">
									<text class="title">{{ item.name }}</text>
									<text class="team">{{ item.office_name }}</text>
								</view>
								<view class="tag">
									<u-tag class="bb u-skeleton-fillet" :text="tag.name" mode="plain" size="mini" color="#d9b975" border-color="#d9b975" v-for="(tag, index) in item.tags" :key="index" />
								</view>
								<view class="member">
									<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
										<view class="scroll-view-item_H tit">
											<view class="text u-skeleton-fillet">
												<view>成</view>
												<view>员</view>
											</view>
										</view>
										<view class="scroll-view-item_H" v-for="(member, index) in item.members" :key="index">
											<image class="avatar u-skeleton-circle" :src="member.avatar || '../../static/images/avatar.png'" mode=""></image>
											<view class="name u-skeleton-fillet">{{ member.nickname }}</view>
										</view>
									</scroll-view>
								</view>
								
								<view class="introduce u-skeleton-fillet">{{ item.description }}</view>
								<view class="price u-skeleton-fillet">
									<text>¥{{ item.minprice }}</text>
									<text>起可咨询</text>
									<text>平均回复：10分钟内</text>
								</view>
							</view>
						</view>
						<view class="empty-lawyer" style="text-align: center;padding-top: 140rpx;" v-show="teamList.length == 0">
							<image src="../../static/images/empty_lawyer.png" mode="" style="height: 292rpx;width: 60%;"></image>
						</view>
					</view>
				</mescroll-body>
			</view>
			
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import { getTeamList, getTagList } from '@/api/lawyerApi.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				mescroll: null,
				btns: [
					{
						id: 1,
						name: '婚姻家事'
					},
					{
						id: 2,
						name: '房产纠纷'
					},
					{
						id: 3,
						name: '公司工商'
					},
					{
						id: 4,
						name: '交通事故'
					},
					{
						id: 5,
						name: '合同纠纷'
					},
					{
						id: 6,
						name: '债权纠纷'
					},
					{
						id: 7,
						name: '劳动用工'
					},
					{
						id: 8,
						name: '刑事辩护'
					},
					{
						id: 9,
						name: '行政复议'
					},
					{
						id: 10,
						name: '行政诉讼'
					}
				],
				current: -1,
				upOption: {
					use: true,
					auto: false,
					page: {
					  num: 1,
					  size: 10 // 每页数据的数量,默认10
					},
					empty: {
					  use: false
					},
					toTop: {
					  src: ''
					},
					onScroll: false,
					textNoMore: '没有更多了',
				},
				downOption: {
					use: false,
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					onScroll: false,
					// bgColor: "#112a49", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					page: {
					    num: 1,
					    size: 10 // 每页数据的数量,默认10
					}
				},
				form: {
					p: 1,
					length: 10,
					name: '',
					isonline: '',
					tag_id: []
				},
				teamList: [
					{
						id: 1,
						name: '专家律师',
						office_name: '专家律师',
						description: '专家律师专家律师专家律师专家律师',
						members: [{avatar: '../../static/images/avatar.png',nickname: '456786'},{avatar: '../../static/images/avatar.png',nickname: '456786'},{avatar: '../../static/images/avatar.png',nickname: '456786'},{avatar: '../../static/images/avatar.png',nickname: '456786'}]
					},
					{
						id: 2,
						name: '专家律师',
						office_name: '专家律师',
						description: '专家律师专家律师专家律师专家律师',
						members: [{avatar: '../../static/images/avatar.png',nickname: '456786'},{avatar: '../../static/images/avatar.png',nickname: '456786'},{avatar: '../../static/images/avatar.png',nickname: '456786'},{avatar: '../../static/images/avatar.png',nickname: '456786'}]
					}
				],
				total: 0
			}
		},
		onLoad() {
			// setTimeout(() => {
			// 	this.loading = false
			// }, 1000)
			this._getTagList()
			this._getTeamList()
		},
		methods: {
			async _getTagList() {
				const res = await getTagList()
				console.log(res)
				this.btns = res.data.data.list.reverse()
			},
			async _getTeamList() {
				const res = await getTeamList(this.form)
				console.log(res)
				if (this.form.p === 1) {
					this.teamList = []
				}
				let list = res.data.data.list.filter(item => item.is_hidden != 1)
				this.teamList = [...this.teamList, ...list]
				this.total = res.data.data.total
				if (this.teamList.length === this.total) {
					this.mescroll.endSuccess(list, false)
				} else {
					this.mescroll.endSuccess(list, true)
				}
				
				// this.teamList = [...this.teamList, ...res.data.data.list]
				// this.total = res.data.data.total
				// if (this.teamList.length === this.total) {
				// 	this.mescroll.endSuccess(res.data.data.list, false)
				// } else {
				// 	this.mescroll.endSuccess(res.data.data.list, true)
				// }
				setTimeout(() => {
					this.loading = false
				}, 500)
			},
			navTo(item) {
				uni.navigateTo({url: `/pages/lawyer/lawyer-detail?id=${item.id}`})
			},
			handleBtnClick(id) {
				if (this.current === id) return
				uni.showLoading({title: '加载中...'})
				this.form.p = 1
				this.form.tag_id = []
				this.form.tag_id.push(id)
				this._getTeamList()
				console.log(id)
				this.current = id
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback(page) {
				setTimeout(() => {
					this.mescroll.endSuccess(10, true)
				}, 2000)
				console.log('下拉刷新')
				console.log(page)
				// console.log(this.downOption.page)
			},
			upCallback(page) {
				console.log('加载更多')
				// console.log(page)
				this.form.p++
				this._getTeamList()
				// this.messageList = this.messageList.concat(data)
				// this.mescroll && this.mescroll.endSuccess(data.length)
			},
		}
	}
</script>

<style lang="scss">
	.header {
		height: 386rpx;
		background: url(../../static/images/find_lawyer_bg.jpg) no-repeat top center;
		background-size: 100%;
		color: #fff;
		padding: 0 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		text-align: center;
		.title {
			font-size: 38rpx;
			margin: 87rpx 0 18rpx 0;
		}
		.subtitle {
			font-size: 22rpx;
		}
		.btn-con {
			display: flex;
			flex-wrap: wrap;
			.btn {
				width: 122rpx;
				// height: 54rpx;
				// line-height: 54rpx;
				display: flex;
				justify-content: center;
				font-size: 22rpx;
				padding: 0;
				border-radius: 32rpx;
				border: 1rpx solid #fff;
				background-color: #0d2647;
				color: #fff;
				margin-bottom: 28rpx;
				&:active {
					opacity: 0.8;
				}
				&:after {
					border: none;
				}
			}
			.btn:nth-child(-n+5) {
				margin-top: 28rpx;
			}
			.current {
				background-color: #fff;
				color: #0d2647;
				transition: all 0.2s ease;
			}
		}
	}
	.lawyer-con {
		padding: 0 30rpx;
		.lawyer-item {
			display: flex;
			border-bottom: 1px solid #f6f7f9;
			padding: 30rpx 0;
			&:last-child {
				border-bottom: none;
			}
			.avatar {
				display: flex;
				flex-direction: column;
				align-items: center;
				.img {
					width: 90rpx;
					height: 90rpx;
					background-color: #f6f7f9;
					border-radius: 50%;
				}
				.cate {
					width: 90rpx;
					height: 90rpx;
					background-color: #1e6ed8;
					border-radius: 50%;
					font-size: 26rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					.item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						letter-spacing: 1px;
					}
				}
				.online {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					.text {
						color: #5b5e67;
						font-size: 20rpx;
						padding-left: 4rpx;
					}
					.iconduihao {
						font-size: 20rpx;
						color: #12b234;
					}
				}
				.offline {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					.text {
						color: #5b5e67;
						font-size: 20rpx;
						padding-left: 4rpx;
					}
					.circel {
						width: 19rpx;
						height: 19rpx;
						background-color: #b8b9bc;
						border-radius: 50%;
					}
				}
			}
			.lawyer-info {
				margin-left: 15rpx;
				.name {
					color: #222c42;
					.title {
						font-size: 32rpx;
						font-weight: 800;
					}
					.team {
						font-size: 26rpx;
						padding-left: 18rpx;
					}
				}
				.tag {
					margin: 4rpx 0 16rpx 0;
					.bb {
						margin-right: 10rpx;
					}
				}
				.introduce {
					font-size: 24rpx;
					color: #5b5e67;
					margin-bottom: 30rpx;
					margin-top: 20rpx;
				}
				.price {
					font-size: 30rpx;
					color: #363c49;
					font-weight: 800;
					text:nth-child(1) {
						font-weight: normal;
						color: #eb6657;
						font-size: 28rpx;
					}
					text:nth-child(2) {
						padding: 0 44rpx 0 10rpx;
					}
				}
			}
		}
	}
	.member {
		.scroll-view_H {
			white-space: nowrap; // 滚动必须加的属性
			width: 584rpx;
			background-color: #f3f3f3;
			height: 160rpx;
			border-radius: 10rpx;
			position: relative;
			padding-right: 8rpx;
			.scroll-view-item_H {
				display: inline-block;
				width: 90rpx;
				margin: 0 10rpx;
				font-size: 24rpx;
				text-align: center;
				margin-top: 20rpx;
				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
				.name {
					font-size: 24rpx;
					color: #222c42;
					padding-top: 8rpx;
				}
			}
			.tit {
				width: 60rpx !important;
				.text {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					font-size: 28rpx;
					height: 160rpx;
					width: 60rpx;
					background-color: #d5dadf;
					color: #222c42;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					border-radius: 10rpx 0 0 10rpx;
					z-index: 1;
					font-weight: 800;
				}
			}
		}
	}
	
	
</style>
